import styled from 'styled-components'

// 1、基本使用如下：
export const AppWrapper = styled.div`
  .inJs {
    color: blue;
  }
  .test {
    border: 2px solid purple;
  }
`
// 2、同时可以将子元素单独抽取到一个样式组件
/**
     * 例如将test单独抽取（最外层的类名就不用像上面那样写个 .test 了）：
    export const AppTest = styled.div`
      border: 2px solid purple;
    `
      */

// 3、可以通过父组件传参将动态值传过来，以在此通过父组件传过来的值来修改样式
export const AppProps = styled.div`
  .appPropsClass {
    background-color: ${(props) => props.bgc};
    font-size: ${(props) => props.size}px;
    display: inline-block;
    margin: 10px 0;
  }
`
